<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
	<style type="text/css">
			.mui-ellipsis-2{
				-webkit-line-clamp: 3;
				font-size: 17px ;
				text-indent: 0px;
				/* font-weight: bold; */
				color: #505050;
			}
			
			.list-detail{
				margin-top: 5px;
				font-size: 15px;
				color: darkgrey;
				text-indent: 0px;
			}
			li{
				margin-top: 8px;
				padding-bottom: 2px;
				margin: 1px;
				
				border-width: 0px;
				border-color: #e0e0e0;
				border-style: solid;
				border-radius: 5px;
			}
			
			/* 清除列表选中时背景色 */
			.mui-table-view-cell > a:not(.mui-btn).mui-active {
				background-color: #fff;
			}
			
			.mui-table-view:before ,.mui-table-view:after{
				height: 0px;
				
			}
			
			.mui-table-view-cell:after {
		/* 	  position: absolute;
			  right: 0;
			  bottom: 0;
			  left: 15px; */
			  height: 1px;
	/* 		  content: '';
			  -webkit-transform: scaleY(.5);
			  transform: scaleY(.5);
			  background-color: #c8c7cc; */
			}
	
			.avatar-icon{
				height : 20px;
				width : 20px 
				/* border-radius: 50%; */
				margin-top: 2px;
				float: left;
			}
			
			.mui-table-view-cell{
				margin-top: 8px;
				margin-left: 0px;
				margin-right: 0px;
			}
			
			.dislike-icon{
				width: 25px;
				height: 25px;
				float: right;
				margin-right: 8px;
				margin-top: 10px;
				padding: 8px;
			}
			
		</style>
		
</head>
<body>
	
<div class="mui-content">
	<div style="height: 150px; background-color: white;background-image: url(../../images/back_bg@2x.png);"></div>
	<div id="top-userinfo" style="background-color: white;margin-top: 0px;padding-left: 10px;padding-bottom: 10px;">
		<div id="xiugaitx-id">
			<div style="display: inline-block;"> 
			<img :src="avatar" id="avatar-id" v-on:click="displayLargeImage(avatar)" height="60px" width="60px" style=" margin-top: -30px;margin-left: 0px; border-radius: 50%;">	
			</div>
			
			<div style="display: inline-block;">
				<div style="font-size: 16px; font-weight: 600; color: #333;margin-left: 5px;padding-top: 0px; float: left;">{{user_name}}</div>	
			</div>
		</div>	
		
		<div style="margin-top: 8px;">
			<img v-if="item.sex == 0" src="../../images/girl@2x.png" width="14px" height="14px" style="margin-top: 3px;" > 
			<img  v-else-if="item.sex == 1" src="../../images/boy@2x.png" width="14px" height="14px" style="margin-top: 3px;" >
			
			<div style="margin-left: 10px; font-size: 14px;display: inline-block;margin-top: 0px;">{{item.age}}岁</div>
		<div v-if="!isMySelf()" style="display: inline-block;float: right;margin-right: 20px;">
			<button id="black-btn-id" type="button" onclick="blackBtnAction(this)" style="width: 80px; height: 25px;font-size: 11px;border-radius: 8px;">加入黑名单</button>
			<button id="watch-btn-id" type="button" onclick="watchBtnAction(this)" style="background-color: #EC5252; color: white; border-width: 0; margin-left: 20px; width: 80px; height: 25px;font-size: 11px;border-radius: 8px;">关注</button>
		</div>
		</div>
		
		<div style="margin-top: 8px;">
			<img src="../../images/city_native@2x.png" width="15px" height="14px" > <div style="margin-left: 6px; font-size: 14px;display: inline-block;">{{item.location || '未知'}}</div>
		</div>
		
		<div style="margin-top: 8px;font-size: 13px;">
			<span style="font-size: 13px;padding-right: 5px;">签名:</span>{{item.notes || '无签名'}}
		</div>
		
		<div style="margin-top: 8px;font-size: 16px;padding-bottom: 2px;color: #666;">
			<span style="font-size: 13px;padding-right: 5px;">收到的赞:</span> <span style="color: #FF4500;font-weight: 500;">{{item.zanCnt}}</span>
			<span style="margin-left: 25px; font-size: 13px;padding-right: 5px;">粉丝:</span><span style="color: #FF4500;font-weight: 500;">{{item.fanCnt}}</span>
			<span style="margin-left: 25px; font-size: 13px;padding-right: 5px;">积分:</span><span style="color: #FF4500;font-weight: 500;">{{item.score}}</span>
		</div>
	</div><!-- 用户基本信息 -->

	<div id="dt-list-id" style="margin-top: 0px;">
		<div style="red; font-size: 14px;margin-left: 10px;height: 30px;padding-top: 12px;color: #666;">全部动态</div>
		
		<ul class="mui-table-view" id="table-view-id" style="padding: 0px 0px 0px 0;" v-cloak >	
			<li :id="item.pid" class="mui-table-view-cell"  v-for="item in items">
				<a @tap="tableViewDidClicked(item)">
					<div class="mui-media-body">
						<div class="mui-ellipsis-2">
							{{getContent(item)}}
						</div>
						
						<div class="list-detail mui-ellipsis-2">
							{{_formatterContent(item.content.content)}}
						</div>
					</div>
					
					<img  v-if="item.flag" v-bind:src="item.imageUrl" v-bind:style="{width:item.width + 'px' , height:item.width + 'px' , marginTop:'10px' , borderRadius:'5px'}" >
					
					<div>
						<div style="">
							<!-- <img v-bind:src="item.user.avatar_thumb || '../../images/default_avatar.png'" class="avatar-icon"  style="border-radius: 50%;width:25px;height: 25px; margin-top: 8px;" >
							<div style="display: inline-block;color: #666;font-size: 13px;margin-left: 5px;margin-top: 5px;margin-bottom: 0px; max-width: 100px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-top: 5px;">
								{{item.user.name}} 
							</div> -->
							<div style="display: inline-block;color: #666;font-size: 12px;margin-left: 0px; margin-top: 3px;">
								<span style="margin-right: 10px;">阅读{{item.readCnt}}</span><span>{{item.postDateFormatter}} </span>
								
								<span v-if="item.status == 0 || item.status == 2" style="padding: 0px 3px; border-radius: 5px; float: right; margin-left: 25px; font-size: 11px;background-color: red;color: white;">{{item.status == 0 ? '待审核' : '未通过'}}</span>
							</div>
							
							<a v-if="isMySelf(item)" v-on:click.stop="deleteMyPost(item)" style="float: right;margin-right: 8px;margin-top: 0px;padding: 5px;">
								<img src="../../images/shanchu.png" width="15px" height="15px" >
							</a>
						</div>
					</div>
				</a>
			</li>
		</ul>
		
	</div>
</div>

<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/api.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/date.formatter.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/open.page.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/user.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/hud.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/tt.refresh.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/p/base-data.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 	var cc = localStorage.length;
// 	console.log(cc);
// 	console.log(localStorage.key(0));
	
	var _userinfo;
	mui.init({
		pullRefresh: {
			container: '#dt-list-id',
			down: {
				style: 'circle',
				// offset: '1px',
				auto: false,
				callback: pulldownRefresh
			},
			up: {
				contentrefresh: '正在加载...',
				callback: loadMoreData
			}
		}
});
	
		var baseinfo = new Vue({
		el:'#top-userinfo',
		data:{item:{}},
		computed:{
			user_name:function(){
				var user = this.item;
				var uname = user["name"] || user['nickName'];
				return uname;
			},
			avatar:function(){
				var d = this.item;
				var u_avatar = d['avatar_thumb'] || "../../images/default_avatar.png";
				return u_avatar;
			}
		},
		methods:{
			isMySelf:function(){
				var user = this.item;
				return user['user_id'] == getLoginUid();
			}
		}
	})
	
	
	var ztlist = new Vue({
		el: '#table-view-id',
		data: {
			items: []
		},
		methods:{
			getContent:function(item){
				var _type = item['type'];
				if(homeAvaliableItemType.indexOf(_type) == -1){
					return item['content']['title'];
				}
				
				return item['content'];
			},
			isMySelf:function(item){
				var user = item;
				return user['uid'] == getLoginUid();
			},
			
			_formatterContent:function(s){
				if(!s)return s;
				var _s = s.replace(/\$/g , '');
				return _s;
			}
			
		}
	});
	
	mui.plusReady(function () {
		var wv = plus.webview.currentWebview();
		var _uid = wv.uid;
		if(!_uid)return;
		
		//用户信息
		function getUserProfile(){
			var uinfo = {"uid":_uid, "type":"3" , 'z':1};
			api_post(update_profile_url , uinfo , function(res){
				// console.log(JSON.stringify(res));
				_userinfo = res;
				baseinfo.item = res;
				
				//别人的主页
				if(!baseinfo.isMySelf()){
					var watchBtn = mui('#watch-btn-id')[0];
					var blackBtn = mui("#black-btn-id")[0];
					
					//是否关注
					_checkAction(fans_url , 0 , watchBtn);
					
					//是否拉黑
					_checkAction(blackList_url , 0 , blackBtn);
					
					
				}
			});
			
		}
		
		getUserProfile();
		
	   var pars = {
	   	// "category":"sy" ,
	   	"type":0 ,
		'uid':_uid,
		'pageNumber':1,
		'z':1
	   }
	   
// 	   {
// 		"category":"sy" ,
// 		"uid": uid ,
// 		 "pageNumber":pageNumber,
// 		 "type":isMyFromPublish ? 0 : 1   
// 	   } 
	   ttRefreshInit('#dt-list-id', homepage_url , pars , function(res){
			_dataConvert(res);
			hud_close('加载完成');
	   });
	   
	   hud_show('加载中');
	   refreshRequestData();
	})

	
	///数据转化处理
	function _dataConvert(arr){//动态列表
		if(arr == null || arr.length < 1){return;}
		for (var i = 0; i < arr.length; i++) {
			var d = arr[i];
			var _type = d['type'];
			//_type == '10' || _type == '11' || _type == '12' || _type == '13' || _type == '14'|| _type == '15'
			if(homeAvaliableItemType.indexOf(_type) == -1){
				var content = d['content'];
				content = content.replace(/\n/g,"$")
				// content = content.replace(/"/g,"0")
				
				var obj = JSON.parse(content);
				d['content'] = obj;
			}
			
			var postDate = d['postDate'];
			d['postDateFormatter'] = dateUtils.format(postDate);
			
			var uname = d['user']['name'];
			var nick = d['user']['nickName'];
			if(uname == null || uname == ''){d['user']['name'] = nick;}
			
			var u_avatar = d['user']['avatar'] || "../../images/default_avatar.png";
			d['user']['avatar'] = u_avatar;
			
			//添加图片		
			var igStr = d['images'];
			if(igStr != null && igStr.length > 0){
				var igurlArr = igStr.split(',');
				d['imageUrl'] = igurlArr[0];
				d['flag'] = 1;
				var w = (plus.screen.resolutionWidth - 30) / 3.0;
				d['width'] = w;
			}	
		}
		
		dataSourceArr.push.apply(dataSourceArr ,arr);
		
		//渲染列表
		ztlist.items = dataSourceArr;
	}
	
	//跳转详情页
	function tableViewDidClicked(item){
		// var _category = dt_type_life;
		// var _type = item['type'];
// 		switch (_type){
// 			case '10':
// 			case '11':
// 			case '12':
// 			case '13':_category = dt_type_sy;break;
// 			case '6':_category = dt_type_zt;break;
// 			default:break;
// 		}
// 		
		var _category = getItemCategory(item['type']);
		var h = plus.nativeUI.showWaiting();
		setTimeout(function(){
			h.close();
			openNewPage('../home/home-detail.html', '详情' , true,{'item':item , 'category':_category});
		} , 500)
		
	}
	
	/**拉黑，关注操作处理方法***/
	//拉黑按钮操作事件
	function blackBtnAction(btn){
		if(!userHasLogined()){hud_toast('请先登录');return;}
		
		if(!isBlacked){
			mui.confirm("拉黑后无法查看该用户的动态信息", "提示" ,  ["确定", "取消"], function(e) {
			    if(e.index == 0){
			       _checkAction(blackList_url ,  3 , btn);	
			    }
			});
		}else{
			_checkAction(blackList_url , 4 , btn);
		}
	}
	
	//关注按钮操作事件
	function watchBtnAction(btn){
		if(!userHasLogined()){hud_toast('请先登录');return;}
		
		_checkAction(fans_url , isWatched ? 4 : 3 , btn);
	}
	
	var isWatched = false;//默认么有关注
	var isBlacked = false;//没有拉黑

	/**关注或拉黑操作
	 * url:请求地址
	 * optType:关注或拉黑操作 - 0查询 、 3添加 、 4取消
	 * operationBtn：操作按钮
	 */
	function _checkAction(url, optType, operationBtn){
		if(!userHasLogined()){hud_toast('请先登录');return;}
		
		var d = {"uid":getLoginUid() , "auhorId":_userinfo['user_id'] , "type":optType};
		// console.log(JSON.stringify(d));
		
		if(optType > 0){plus.nativeUI.showWaiting('请求中');}
		api_post(url , d , function(res){
			var isR = res['is'];
			if(url == fans_url){
				switch (optType){
					case 0:
						if(isR){
							operationBtn.innerText = '已关注';
							isWatched = true;
						}break;
					case 3:
						if(isR){
							isWatched = true;
							operationBtn.innerText = '已关注';
							hud_close('添加关注成功');
						}else{
							hud_close('请求网络失败，请稍后重试');
						}
						break;
							
					case 4:
						if(isR){
							isWatched = false;
							operationBtn.innerText = '关注';
							hud_close('取消关注成功');
						}else{
							hud_close('请求网络失败，请稍后重试');
						}break;
					default:break;
				}
			}else{
				switch (optType){
					case 0:
						if(isR){
							operationBtn.innerText = '已拉黑';
							isBlacked = true;
						}break;
					case 3:
						if(isR){
							isBlacked = true;
							operationBtn.innerText = '已拉黑';
							hud_close('已添加到黑名单');
						}else{
							hud_close('请求网络失败，请稍后重试');
						}
						break;
							
					case 4:
						if(isR){
							isBlacked = false;
							operationBtn.innerText = '加入黑名单';
							hud_close('解除拉黑');
						}else{
							hud_close('请求网络失败，请稍后重试');
						}break;
					default:break;
				}
			}
		},function(error){
			console.log('关注拉黑出现错误:' + error);
		})
	}
	
	//删除动态
	function deleteMyPost(item){
		mui.confirm("确定删除这条动态?", ["确定", "取消"], function(e) {
		    if(e.index == 0){
				var _category = getItemCategory(item['type']);
				var d = {"uid":getLoginUid() ,
				     "pid": item['pid'],
				     "category":_category,
				     "type":0};
					 
		       hud_show('正在删除');
		       api_post(delete_sc_url , d , function(res){
		       	hud_close('删除成功');
				
				//删除列表元素
				var l = document.getElementById(item['pid']);
				l.parentNode.removeChild(l);
		       } , function(error){
		       	hud_close(error);
		       }) 
		    }
		});
		
	}
	
	//用户大图
	function displayLargeImage(url){
		plus.nativeUI.previewImage([baseinfo.item.avatar || '../../images/default_avatar.png']);
	}
	
</script>
</body>
</html>